<template>
	<div class="index">
		<comHeader></comHeader>
		<div class="container">
			<div class="top">
				<div class="img">
					<img v-if="bigimg" :src='bigimg.large' v-cloak>
				</div>
				<div class="right">
                    <div class="name">电影：{{mInfo.title}}</div>
                    <div class="coutry">国家：<span v-for="gj in mInfo.countries">{{gj}}</span></div>
                    <div class="coutry">评分：<strong>{{mInfo.rating.average}}分</strong></div>
                    <div class="coutry">导演：<span v-for="dy in mInfo.directors">{{dy.name}}</span></div>
                    <div class="coutry">类型：<span v-for="lx in mInfo.genres">{{lx}}</span></div>
                    <div class="coutry">主演：<span v-for="zy in mInfo.casts">{{zy.name}}</span></div>
                    <div class="coutry">简介：<span class="txt1">{{mInfo.summary}}</span></div>
				</div>
			</div>
			<div class="top">
				<h3>{{mInfo.title}}的影人</h3>
				<div class="yingren">
					<div class="list" v-for="dyy in mInfo.directors">
						<div class="img"><img v-cloak v-if="bigimg" :src='dyy.avatars.small'></div>
						<div class="name">{{dyy.name}}</div>
					</div>
					<div class="list" v-for="zyy in mInfo.casts">
						<div class="img"><img v-if="bigimg" :src='zyy.avatars.small'></div>
						<div class="name">{{zyy.name}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	// import lunbo from './lunbo'
	import comHeader from './comHeader'

	export default {
		name: "movies_xq",
		data(){
			return{
				msg:'',
				mInfo:{},
				bigimg: [],
				isShow: true
			}
		},
		methods:{
			getinfo(){
				let routerParams = this.$route.query.movieId
		        // 将数据放在当前组件的数据内
		        this.msg = routerParams
		        this.$http.get("/api/movie/subject/"+this.msg)
		        .then(({ data }) => {
		          console.log(data, '这是点击的');
		          this.mInfo = data;
		          this.bigimg = data.images;
		          
		        })
		        .catch(error => {
		          console.log(error)
		        });
			}
		},
		components: {
		    // "lunbo": lunbo
		    "comHeader": comHeader
		},
		created(){
			this.getinfo();
		},
		watch: {
	        // 如果路由有变化，会再次执行该方法
	        
	        '$route' (to, from) {
		      // this.getinfo()
		     //  	const toDepth = to.path.split('/').length
			    // const fromDepth = from.path.split('/').length
			    // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
			    // console.log(to.name)
			    if(to.name == 'movies_xq'){
			    	this.getinfo()
			    }
		    }
	    }
	}
</script>
<style scoped>
	.top{
		width: 100%;
		margin-top: 20px;
		float: left;
	}
	.top h3{
		font-weight: normal;
    	text-align: left;
	}
	.top .img{
		width: 270px;
		height: 378px;
		float: left;
	}
	.top .img img{
		display: block;
		width: 100%;
		height: 100%;
	}
	.top .right{
		width: 890px;
		float: right;
	}
	.top .right .name{
		font-size: 20px;
		color: #333;
		line-height: 50px;
		text-align: left;
	}
	.top .right .coutry{
		font-size: 18px;
		color: #333;
		line-height: 36px;
		text-align: left;
	}
	.top .right .coutry span{
		padding-right: 8px;
	}
	.top .right .coutry strong{
		font-weight: normal;
		color: #e2bd67;
	}
	.top .right .coutry .txt1{
		font-size: 14px;
		color: #666;
		line-height: 0px;
	}
	.top .yingren{
		width: 100%;
		height: auto;
		zoom: 1;
	}
	.top .yingren .list{
		width: 160px;
		float: left;
		margin: 20px;
	}
	.top .yingren .list .img{
		width: 100%;
		height: auto;
		zoom: 1;
	}
	.top .yingren .list .img img{
		display: block;width: 100%;
	}
	.top .yingren .list .name{
		width: 100%;
		font-size: 14px;
		text-align: center;
		line-height: 30px;
	}
</style>